<template>
	<el-main>
		<el-row>
			<el-col>
				<div class="tips-default-box" v-html="tipsTitle"></div>
				<div style="margin-top: 24px;" id="editor"></div>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import wangEditor from 'wangeditor'
	export default {
		data() {
			return {
				tipsTitle: '这里仅实现了最基础的使用方法，如需了解更多使用方法请参考<a href="https://www.wangeditor.com/doc/" target="_blank">官方文档</a>',
			}
		},
		mounted() {
			const editor = new wangEditor('#editor');
			editor.create();
		}
	}
</script>

<style>
	/* 解决wangeditor z-index层级太高的问题 */
	.w-e-toolbar{
		z-index: 1 !important;
	}
	.w-e-menu {
		z-index: 2 !important;
	}
	.w-e-text-container {
		z-index: 1 !important;
	}
</style>
